<template>
    <div class="person">
        <h2>姓名:{{ name }}</h2>
        <h2>年龄:{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">年龄+1</button>
        <button @click="showTel">点我查看联系方式</button>
    </div>
</template>
<!-- 创建一个Setep组件,会自动输出创建的内容 -->
<script lang="ts" setup name='Person'>

    let name = "张三"
    let age = 18
    let tel = "135555555"

    function changeName() {
        name="sdsadas"
    }
    function changeAge() {
        age+=1
    }
    function showTel() {
        alert(tel)
    }
</script>
<style scoped>
/*  组件的样式 */
    .person{
            /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }


</style>
